<template>
  <div class="box">
   <van-nav-bar title="分类"  class="nav"/>
   <div  class="nav1"></div>
     <van-card
     class="sp"
     v-for="item in list"
     :key="item.id"
  :price="item.parice"
  :desc="item.desc"
  :title="item.title"
  :thumb="item.img"
>
  <template #footer>
  <van-icon name="shopping-cart-o" class="red" size="30" @click="add(item)"/>
  </template>
</van-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[],
    }
  },
  mounted(){
  this.$axios.get("/data.json").then((res)=>{
    this.list=res.data.list;
  })
  },
  methods:{
    // 调用vuex中的mutations里面的add方法
    add(item){
      this.$store.commit("add",item);
    }
  }
};
</script>
<style scoped>
  .goods-card {
    margin: 0;
    background-color:lightyellow;
    margin-top: 10px;
  }

  .delete-button {
    height: 100%;
  }
  .q1{
 margin-left: 20px;
 margin-top: 60px;
 box-sizing: border-box;
  }
  .sp{
    background: lightpink;
  }
  .box{
    margin-bottom: 70px;
  }
    .nav{
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
  }
  .nav1{
    margin-top: 50px;
  }
</style>